<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
      #btn {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
      }
    </style>
  </head>
  <body>
    <!-- konva 舞台 -->
    <div id="container"></div>
    <div>
      <button id="btn">btn</button>
    </div>
    <script src="./asserts/konva.js"></script>
    <script>
      const stage = new Konva.Stage({
        container: 'container',
        // 宽高全屏
        width: window.innerWidth,
        height: window.innerHeight,
      })

      const layer = new Konva.Layer()

      stage.add(layer)

      // 中心点 坐标
      const centerX = stage.width() / 2
      const centerY = stage.height() / 2

      const x = (1 / 8) * stage.width()
      const y = centerY

      const height = (1 / 12) * stage.height()
      const maxWidth = (3 / 4) * stage.width()

      // 绘制一个进度条
      // 进度条内部
      const innerRect = new Konva.Rect({
        x,
        y,
        width: 0,
        height,
        opacity: 0.7,
        fill: 'lightblue',
        // 圆角
        cornerRadius: height / 4,
        // 在 group 里 通过引入 这个 id 获得该图形对象
        // group.findOne('#interRectId')
        id: 'innerRectId',
        // 或者类似与 css 的类选择器，group.find('.shape')
        name: 'shape',
      })

      // 进度条外部
      const outerRect = new Konva.Rect({
        x,
        y,
        width: maxWidth,
        height,
        stroke: 'blue',
        cornerRadius: height / 4,
        // 在 group 里 通过引入 这个 id 获得该图形对象
        // group.findOne('#outerRectId')
        id: 'outerRectId',
        // 或者类似与 css 的类选择器，group.find('.shape')
        name: 'shape',
      })

      // 可以将图形组成组
      const group = new Konva.Group({
        x: 0,
        y: 0,
      })
      group.add(innerRect)
      group.add(outerRect)

      // 层可以直接添加图形，或者添加图形组成的组
      layer.add(group)

      layer.draw()

      // Konva 的动画系统 来操作 innerRect
      // innerRect.to({
      //   // 属性变化
      //   width: maxWidth,
      //   // 持续时间
      //   duration: 5,
      //   // 动画曲线（这里是 后退后再前进）
      //   easing: Konva.Easings.BackEaseIn,
      // })

      let value = 0

      // 变化进度条
      btn.onclick = () => {
        value += 10
        if (value > 100) {
          return
        }
        innerRect.to({
          width: (value * maxWidth) / 100,
          duration: 0.2,
        })
      }
    </script>
  </body>
</html>
